<template>
    <!-- 选择数据公共页面，通过此页面调component组件 -->

    <!--
       @cancel 取消
       @confirm 确认（会返回确认的对象数据）
       @search 搜索数据，将参数发送给父组件
       @currentChange 改变分页
       title 标题
       tableData 列表数据  ***必传***
       pagination 列表分页
       tableColumnAttr 列表属性  ***必传***
       tableColumnWidth 左右列表宽度
       ifPagination 数据是否有分页 0没 1有（默认）,
       selectMode 选择方式 0单选(默认) 1多选
       keyWord 后端返回的每条数据唯一字段如id（用来做对比） ***必传***
       searchKey 接口搜索字段  ***有分页必传，没有分页不用传***
     -->

    <ComSelectData
        v-if="tableData.length !== 0 && tableDataClone"
        @cancel="cancel"
        @confirm="confirm"
        @search="search"
        @currentChange="currentChange"
        :title="params.title"
        :tableData="tableData"
        :pagination="pagination"
        :tableColumnAttr="params.tableColumnAttr"
        :tableColumnWidth="params.tableColumnWidth"
        :ifPagination="params.ifPagination"
        :selectMode="params.selectMode"
        :keyWord="params.keyWord"
        :searchKey="params.searchKey"
    />
</template>

<script>
/*  */
import ComSelectData from '@/components/common/selectData'
export default {
    data () {
        return {
            // 传递的参数
            params: {
                // title: '', //标题
                // url: '', //地址
                // method: '', //方式
                // params: {}, //参数
                // selectTableColumnAttr: [], //表格属性
                // selectTableColumnWidth: {} //左右表格宽度
            },
            // 返回的数据
            tableData: [], //接口返回的数据
            tableDataClone: [], //浅拷贝接口返回的数据
            pagination: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            }, //接口返回的数据分页
            selectData: {}, //选择的数据
            searchTableDataClone: []
        }
    },
    created () {
        this.params = JSON.parse(this.$route.query.params)
        // console.log('params', this.params)
        // this.params.limit === undefined //是否传了分页参数，没传则设置默认
        //     ? (this.params.limit = 10)
        //     : this.params.limit
        // this.params.page === undefined ? (this.params.page = 1) : this.params.page
        this.params.ifPagination === 0 ? 0 : 1 //返回数据是否有分页，默认有分页
        this.getData()
    },
    components: {
        ComSelectData
    },
    methods: {
        getData (searchKey = '') {
            const params = this.params.method === 'get' ? 'params' : 'data'
            if (this.params.ifPagination === 0) {
                this.$Ajax({
                    url: this.params.url,
                    method: this.params.method,
                    [params]: { ...this.params.params }
                }).then(res => {
                    this.tableDataClone = JSON.parse(JSON.stringify(res))
                    this.tableData = res.filter((value, key) => {
                        return key <= 9
                    })
                    this.pagination.total = res.length
                })
            } else {
                // 可能每个接口自定义搜索字段不同
                this.$Ajax({
                    url: this.params.url,
                    method: this.params.method,
                    [params]: {
                        ...this.params.params,
                        limit: this.pagination.pageSize,
                        page: this.pagination.currentPage,
                        [this.params.searchKey]: searchKey
                    }
                }).then(res => {
                    this.tableData = res.list || res
                    this.tableDataClone = JSON.parse(JSON.stringify(this.tableData))
                    this.pagination.total = res.total || res.totalCount
                })
            }
        },
        confirm (data) {
            if (data && data?.length !== 0) {
                this.$notify.closeAll()
                data = JSON.stringify(data)
                this.$notify({
                    title: '提示',
                    dangerouslyUseHTMLString: true,
                    message: `回调参数<br>
                <textarea cols="35" rows="10">${data}</textarea>
                `,
                    duration: 0
                })
            }
        },
        search (value) {
            if (this.params.ifPagination === 0) {
                this.searchTableDataClone = this.tableDataClone.filter(item => item.orgName.includes(value))
                this.tableData = this.searchTableDataClone.filter((value, key) => {
                    return key <= 9
                })
                this.pagination.total = this.searchTableDataClone.length
            } else {
                this.getData(value)
            }
        },
        currentChange () {
            if (this.params.ifPagination === 0) {
                if (this.searchTableDataClone.length !== 0) {
                    this.tableData = this.searchTableDataClone.slice(
                        this.pagination.currentPage * this.pagination.pageSize - 1,
                        this.pagination.currentPage * this.pagination.pageSize - 1 + this.pagination.pageSize
                    )
                } else {
                    this.tableData = this.tableDataClone.slice(
                        this.pagination.currentPage * this.pagination.pageSize - 1,
                        this.pagination.currentPage * this.pagination.pageSize - 1 + this.pagination.pageSize
                    )
                }
            } else {
                this.getData()
            }
        },
        cancel () {
            this.$message({
                showClose: true,
                type: 'error',
                message: '请点确认复制回调参数到上级页面执行回调方法，手动关闭此页面'
            })
        }
    }
}
</script>

<style lang="less" scoped></style>
